<template>
<div class="wrapper">
  <Row v-for="(item,index) in columns">
    <Col :span="labelSpan" style="display: flex;align-items: center"><span>{{item.title}}</span></Col>
    <Col :span="24-labelSpan">
      <tpl-cell :config="item.config" :value="tools.lodash.get(data,item.key)" @change="change($event,item.key)"></tpl-cell></Col>
  </Row>
</div>
</template>

<script>
import tplCell from './cfg-cell'
export default {
  name: "cfg-map",
  components:{tplCell},
  props: {
    labelSpan: {
      default: () => {
        return 12;
      }
    },
    columns: {
      default: () => {
        return [];
      }
    },
    data:{
      default:()=>{
        return {};
      }
    },
  },
  methods:{
    change(value,path){
      this.tools.lodash.set(this.data,path,value)
    }
  }
}
</script>

<style scoped>
.wrapper {
  padding:5px;
  overflow-y: auto;
}
</style>
